import { server } from '../libs/server.js';
import { tools } from '../libs/tools.js';
import { createApp } from '../libs/vue.browser.js';

let app = createApp({
  // 所有要在页面中使用的对象都要放在data小节中
  data() {
    return {
      plist: [],
      pid: -1,
      clist: [],
      cid: -1,
      tools: tools,
      loading: false,
    };
  },
  // 所有要在页面中使用的方法或者要绑定事件的处理方法都在methods小节中
  methods: {
    query() {
      // 长时间任务发起前将加载状态变为真
      this.loading = true;
      server.post('/linkinfo/queryAllProvince', {}, (data) => {
        // 任务返回后加载状态恢复为假
        this.loading = false;
        if (!data.success) {
          alert(data.message);
          return;
        }
        this.plist = data.list;
        // 默认选中（这里需要严谨判定，就是有可能是空数组）
        this.pid = this.plist[0].pid;
        this.queryCity();
      });
    },
    queryCity() {
      this.loading = true;
      server.post(
        '/linkinfo/queryCityByProvince',
        {
          pid: this.pid,
        },
        (data) => {
          setTimeout(() => {
            this.loading = false;
          }, 3000);

          if (data.success) {
            this.clist = data.list;
            this.cid = this.clist[0].cid;
            return;
          }
          alert(data.message);
        }
      );
    },
  },
  // 当vue实例创建完毕之后会调用created()方法
  // 是生命周期方法之一
  created() {
    this.query();
  },
});

// 练习题：完成部门员工以及班级学生联动效果
// 选择项判定为默认选中中间项

app.mount('#app');
